<template>
  <main>
    <div class="home-page">
      <div class="input-group" :class="{ input: focusing }">
        <el-input
          v-model="city"
          placeholder="请输入城市名称"
          @focus="focusing = true"
          @blur="focusing = false"
        ></el-input>
        <div v-if="city" class="input-hint">
          <p v-if="notCity">似乎没有找到你查找的城市</p>
          <p v-if="notNet">对不起网络似乎除了点问题 请稍后再查询</p>
          <p>
            <a :href="`/examine/?adcode=${adcode}&city=${cityName}`">
              {{ cityName }}
            </a>
          </p>
        </div>
      </div>
      <div class="city-item" v-if="!city">
        <div v-for="item in cityWeatherList" v-if="isGain" class="weather-info">
          <div class="title-item">
            <h3>{{ item.city }}</h3>
            <span>{{ item.temperature }}度</span>
          </div>
          <div class="btn-itme">
            <button
              @click="
                router.push(`/examine/?adcode=${item.adcode}&city=${item.city}`)
              "
            >
              查看
            </button>
            <button @click="cityWeatherList.splice(index, 1)">删除</button>
          </div>
        </div>
        <div v-else class="loading">正在加载城市信息...</div>
      </div>
      <div v-if="cityWeatherList.length == 0" class="loading">
        暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
      </div>
      <h2>近期天气</h2>
      <WeatherCard :casts="casts"></WeatherCard>
    </div>
  </main>
</template>

<script setup>
import WeatherCard from '@/components/WeatherCard.vue';
import { getCityAdcode, getCityWeather, getCityByIp } from '@/api/index.js';
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const city = ref('');
const focusing = ref(false);
const notNet = ref(false);
const notCity = ref(false);
const cityName = ref('');
const adcode = ref('');
const casts = ref();

const cityWeatherList = ref([]);
const isGain = ref(false);

const ip = '202.103.24.68';

const getList = () => {
  const res = JSON.parse(localStorage.getItem('cityWeatherList') || '[]');
  cityWeatherList.value = res;
  cityWeatherList.value.forEach((item) => {
    getCityWeather(item.adcode, 'base').then((res) => {
      item.temperature = res.lives[0].temperature;
      isGain.value = true;
    });
  });
  if (cityWeatherList.value.length == 0) {
    isGain.value = true;
  }
};

watch(
  cityWeatherList,
  () => {
    localStorage.setItem(
      'cityWeatherList',
      JSON.stringify(cityWeatherList.value)
    );
  },
  { deep: true }
);

onMounted(() => {
  getCityByIp(ip).then((res) => {
    getCityWeather(res.adcode, 'all').then((weather) => {
      casts.value = weather.forecasts[0].casts;
    });
  });
  getList();
});

watch(city, () => {
  notNet.value = false;
  notCity.value = false;
  cityName.value = '';
  getCityAdcode(city.value)
    .then((res) => {
      const cityData = res.geocodes[0];
      adcode.value = cityData.adcode;
      if (cityData.level == '省') {
        cityName.value = cityData.province;
      } else if (cityData.level == '市') {
        cityName.value = cityData.city;
      } else if (cityData.level == '区县') {
        cityName.value = cityData.district;
      } else {
        cityName.value = cityData.formatted_address;
      }
    })
    .catch((error) => {
      if (error.message.includes('Network Error')) {
        notNet.value = true;
      } else {
        notCity.value = true;
      }
    });
});
</script>

<style lang="scss" scoped>
main {
  margin: 0 80px;
  padding: 80px 160px;
  min-height: 100vh;
}
.home-page {
  padding-top: 16px;
  .input-group {
    position: relative;
    border-bottom: 0.5px solid white;
    :deep(.el-input__wrapper) {
      height: 40px;
      padding: 0;
      // margin-bottom: 32px;
      background-color: rgb(0 102 138);
    }
    :deep(.el-input__inner) {
      height: 40px;
      padding: 8px 4px;
      color: white;
      background-color: rgb(0 102 138);
      border: none;
      box-shadow: none;
    }
    .input-hint {
      position: absolute;
      top: 120%;
      left: 0;
      width: 100%;
      background-color: rgb(0 78 113);
      color: white;
      line-height: 24px;
      padding: 8px 4px;
    }
  }
  .input-group.input {
    border: none;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  }
  .city-item {
    margin-top: 32px;
  }
  .weather-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    .title-item {
      display: flex;
      height: 40px;
      color: white;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 8px 16px;
      flex: 1;
      background-color: rgb(0 78 113);
      cursor: pointer;
      transition: all 0.3s ease-out;
    }
    .btn-itme {
      display: none;
      gap: 10px;
      button {
        height: 40px;
        padding: 0 20px;
        background-color: white;
        color: rgb(0 78 113);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease-out;
      }
      button:hover {
        transform: translateY(-2px);
      }
    }
  }
  .weather-info:hover .btn-itme {
    display: flex;
  }
  .weather-info:hover .title-item {
    flex: 0.98;
  }
  .loading {
    color: white;
    text-align: center;
  }
  h2 {
    margin-top: 24px;
    color: white;
    line-height: 24px;
  }
}
</style>
